import React from 'react'
import '@/assets/css/login.scoped.css'

const Component = () =>
{
  const [business, SetBusiness] = useState({
    mobile: '18888888888',
    password: '123456'
  })

  //values 声明any类型 any是任意类型
  //提交表单的方法
  const login = async (values:any) => 
  {

    //发起http请求
    var result = await React.request.post('/business/login', values)
    
    if(result.code == 0){
      React.toast(result.msg,null,'fail');
      return false;
    }
    //存入cookie中去
    React.business = result.data
    React.cookie.save('business',result.data,{path: '/'})
    React.toast(result.msg, result.url,'success')
    return false
  }

  return (
    // initialValues 默认值
    <div className="login">
      <React.UI.Form
        layout='vertical'
        mode='card'
        initialValues={business} 
        onFinish={login}
        footer={
          <React.UI.Button shape='rounded' block type='submit' color='success' size='large'>注册登录</React.UI.Button>
        }
      >
        <React.UI.Form.Item
          name="mobile"
          label="手机号码"
          rules={[
            {required: true, message: '手机号码不能为空' }, 
            {pattern:/^1[3456789]\d{9}$/, message: '手机号格式不对'}
          ]}
        >
          <React.UI.Input placeholder="请输入手机号码" /> 
        </React.UI.Form.Item>

        <React.UI.Form.Item
          name="password"
          label="密码"
          rules={[{ required: true, message: '密码不能为空' }]}
        >
          <React.UI.Input type="password" placeholder="请输入密码" />
        </React.UI.Form.Item>
      </React.UI.Form>
    </div>
  )
}

export default Component